<template>
	<view class="page">
		<!-- 头部背景图 -->
		<view class="pageTopImg" :style="'padding-top:' + touHeight + 'px'"></view>
		<!-- 顶部菜单 -->
		<view class="topHeader" :style="'height:' + touHeight +'px;'">
			<view class="fanhuiUp" @tap="toFanhuiUp"></view>
			<view class="pageTitle">全部订单</view>
		</view>
		<form class="search_content" :class="{'active':onFocus==1}" :style="'top:' + touHeight +'px;'">
			<input name="keywords" @blur="bindblur" @tap="searchOn" :value="value" @confirm="enterSubmit" @input="onInput" placeholder-class="phcolor" placeholder="在这里搜索"/>
			<view class="form_btn" @tap="buttonSubmit"></view>
			<view class="right_quxiao" @tap="delQuxiao">取消</view>
		</form>
		<view class="page_content" :style="'padding-top:' + pageTop + 'px'">
			<view class="empty" v-if="productList.length==0">
				<image :src="URL+'/JD_wx_img/empty_img.png'" mode="widthFix"></image>
				<view class="empty_text">没有找到任何结果</view>
			</view>
			<view class="work_dingdan_fu" v-else>
				<view class="work_dingdan" @tap="toDetails" v-for="(item,index) in productList" :data-id="item.id" :data-key="index" :style="item.show==1?'display:block;':'display:none;'">
					<view class="work_top">
						<view class="name">订单号<view class="num">{{item.number}}</view></view>
						<view class="state" :class="item.status==1||item.status==4?'state01':'state02'">{{item.status_text}}</view>
					</view>
					<view class="dingdan_list">
						<view class="list_top">
							<view class="name">{{item.type_text}}</view>
							<view class="price">¥<view class="bold">{{item.price}}</view>/小时</view>
						</view>
						<view class="dingdan_xinxi orange" style="background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/xinxi_img01.png) left center no-repeat;">{{item.arrival}}</view>
						<view class="dingdan_xinxi" style="background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/jiu_name_img.png) left center no-repeat;">{{item.name}}</view>
						<view class="dingdan_xinxi" style="background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/xinxi_img02.png) left center no-repeat;">{{item.location}}</view>
					</view>
					<view class="dingdan_bottom">
						<view class="anniu">查看详情</view>
					</view>
				</view>
				<!-- 加载效果 -->
				<view class='loading_text' :hidden="noMre">没有更多了</view>
				<view class="loading_text" :hidden="loading">加载中...</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				touHeight: 0,
				pageTop: 0,
				cate: 0,
				//域名拼接
				URL: app.globalData.URL,
				noMre: false,
				loading: true,
				//用于渲染页面的数组
				productList: [],
				//默认页数
				page: 1,
				//每页展示条数
				list_rows: 5,
				value:''
			}
		},
		onLoad(options){
			var that = this;
			//自定义头部高度
			app.customNav()
			that.touHeight = app.touHeight + 5//搜索栏距离顶部高度
			var query = wx.createSelectorQuery();
			query.select('.search_content').boundingClientRect()
			query.exec(function (res) {
				that.pageTop = that.touHeight + res[0].height
			})
			
			//第一次进入要清空不然报错
			wx.setStorageSync('collectKey','');
		},
		
		//每次进入都执行
		onShow(){
			var that = this;
			var collectKey = uni.getStorageSync('collectKey');
			if(collectKey!=''){
				var xianshiList = that.productList;
				xianshiList[collectKey].show = 2;//改变view的显示值
				that.productList = xianshiList;//重组数组
			}
		},
		
		/**
		* 页面上拉触底事件的处理函数
		*/
		onReachBottom(){
			var that = this;
			//触底加载数据
			var page = that.page//当前页数
			var list_rows = that.list_rows//每页展示条数
			var key = that.key;//关键词
			page++;
			that.page = page;
			var page = that.page//触底后的页数
			that.getproinfo(page,list_rows,key,that)
		},
		
		methods: {
			
			// 触发input
			searchOn:function(){
			  var that = this;
			  that.onFocus = 1;
			},
			
			// 离开input
			bindblur:function(){
				var that = this;
				that.onFocus = 0;
			},
			
			//搜索框实时监控
			onInput:function(e){
				var that = this;
				that.value = e.detail.value;
			},
			
			//清空内容
			delQuxiao(){
				var that = this;
				that.value = '';
			},
			
			//返回上一级
			toFanhuiUp:function(){
				uni.navigateBack({
				    delta: 1
				})
			},
			
			//回车提交搜索
			enterSubmit:function(e){
				var that = this;
				var value = that.value
				if(value==''){
					uni.showModal({
						title: '提示',
						content: '搜索内容不能为空',
						showCancel: false,
						confirmColor:'#E85426',
					})		
				}else{
					var page = that.page//当前页数
					var list_rows = that.list_rows//每页展示条数
					var key = value;//关键词
					//清空数组
					that.productList = []
					that.page = 1
					var page = that.page//当前页数
					that.getproinfo(page,list_rows,key,that)
				}
			},
			
			//按钮提交搜索
			buttonSubmit:function(e){
				var that = this;
				var value = that.value
				if(value==''){
					uni.showModal({
						title: '提示',
						content: '搜索内容不能为空',
						showCancel: false,
						confirmColor:'#E85426',
					})		
				}else{
					var page = that.page//当前页数
					var list_rows = that.list_rows//每页展示条数
					var key = value;//关键词
					//清空数组
					that.productList = []
					that.page = 1
					var page = that.page//当前页数
					that.getproinfo(page,list_rows,key,that)
				}
			},

			//跳转到详情
			toDetails:function(e){
				var that = this;
				var order_id = e.currentTarget.dataset.id;
				var key = e.currentTarget.dataset.key;
				uni.navigateTo({
				    url: '/pages/my_work_order/order_details/order_details?order_id='+order_id+'&key='+key,
				});
			},
			
			//岗位列表函数封装
			getproinfo(page,list_rows,key,that){
				var that = this;
			    wx.request({
					url: app.globalData.URL + '/api/v1/User/order?key='+key,
					method: 'get',
					header:{
						token: uni.getStorageSync('token')
					},
					data:{
						page: page,
						list_rows: list_rows,
					},
					success: function (res) {
						var productList = that.productList;
						///没有数据的时候
						if(res.data.data.data.length < 5){
							that.noMre = false
							that.loading = true
						}else{
							that.noMre = true
							that.loading = false
						}
						//有数据的时候循环将结果集追加到数组后面
						for (var i = 0; i < res.data.data.data.length; i++) {
							productList.push(res.data.data.data[i]);
						}
						that.productList = productList
					},
					fail: function (res) {
					  console.log(res);
					},
				});
			}
		}
	}
</script>

<style>
	.work_dingdan .state{
		margin-top: 22rpx;
		margin-right: 20rpx;
	}
	.work_top .name{
		color: #888888;
	}
	.work_top .name .num{
		font-weight: normal;
		display: inline-block;
		margin-left: 10rpx;
	}
	.page_content{
		padding-bottom: 60rpx;
	}
	.empty{
		text-align: center;
		margin-top: 300rpx;
	}
	.empty.block{
		display: block;
	}
	.empty image{
		width: 128rpx;
		margin: 0px auto;
	}
	.empty_text{
		font-size: 28rpx;
		color: #888888;
	}
</style>
